Rodrigo

Hi, I don't have time now to dig into your code, but you could check @Carl's video on staggers and sequences: Hopefully this helps. Happy Tweenig!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/VwOwymP Hopefully this helps. Happy Tweening!

Hey Fernando! I don't know if there is a single demo around that does everything you need, so most likely this will reduce to get inspiration and bits from several of them. Here are others that can definitely help: https://codepen.io/GreenSock/pen/poBRQRj https://codepen.io/GreenSock/pen/BaMOapv https://codepen.io/GreenSock/pen/rNbELKO https://codepen.io/GreenSock/pen/xxjErmp https://codepen.io/GreenSock/pen/wvrXRdZ It's always a good idea to keep these collections in your bookmarks just in case: https://codepen.io/collection/AEbkkJ https://codepen.io/collection/DkvGzg Hopefully this helps, Happy Tweening!

Hi @BiKe and welcome to the GSAP Forums! Maybe this demo can help: https://codepen.io/GreenSock/pen/YzgGwpM Hopefully this helps, Happy Tweening!

Hi, Sorry but I really don't understand what the issue is here exactly. I tested your demo and tried different screen sizes and everything is working as it should. The only advice I would offer is to not make the body tag a flex container. Also I would advice you to create the ScrollTrigger that is pinning the container after creating the ScrollTriggers of the tabs, since those are not pinned they don't affect the start/end position of the pinned one, but the pinned one does have an impact because of the pin space is created. I'm not sure if you're looking for something like this: https://codepen.io/GreenSock/pen/GRaROvZ Hopefully this helps. Happy Tweening!

Hi, I believe the issue starts with the first error you have in the console there, then it kinds of dominoes in the wrong way with ScrollTrigger somehow. Without a minimal demo that clearly illustrates the issue, there is not a lot we can do I'm afraid. I haven't seen any issue like that when deploying to Netlify react/next and vue/nuxt apps before, so I couldn't tell you what the issue is 🤷‍♂️ Sorry I can't be of more assistance 😞 Happy Tweening!

Hi, Use autoAlpha instead of opacity: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/#autoalpha Hopefully this helps. Happy Tweening!

Hi, I think you should simplify your approach a little bit, get the animation with ScrollTrigger working first and then add snapping to the mix. I recommend you to have a look at this threads in order to better grasp the stacking card concept: Hopefully this helps. Happy Tweening!

Hi, That demo uses ScrollTrigger's observe which has been ported into the Observer Plugin: https://gsap.com/docs/v3/Plugins/Observer/ Here are a couple of demos that show how to integrate ScrollTrigger and Observer: https://codepen.io/GreenSock/pen/ExEOeJQ https://codepen.io/GreenSock/pen/oNdNLxL Hopefully this helps. Happy Tweening!

Sorry about the issues but without a minimal demo that clearly illustrates the problem there is not a lot we can do. The only thing I can see in your code is that you have the isTweening boolean commented out in your onUp and onDown callbacks, so that will definitely won't work: // let isTweening = false; // console.log(isTweening); // Observer For Timeline Observer.create({ type: "wheel, touch, pointer, touchmove", target: window, preventDefault: true, wheelSpeed: -1, tolerance: 100, dragMinimum: window.innerWidth >= 480 ? 100 : 20, onUp: () => { // if (isTweening) return; // isTweening = true; // console.log(isTweening); if (mastertl.totalProgress() < 1) { mastertl.play(); } }, onDown: () => { // if (isTweening) return; // isTweening = true; // console.log(isTweening); if (mastertl.totalProgress() <= 1) { mastertl.reverse(); } }, }); Sorry I can't be of more assistance. Happy Tweening!

Hi @AntonioNB4, You could try the dragClickables config option in the Draggable instance created in the helper function: https://gsap.com/docs/v3/Plugins/Draggable/#dragClickables Hopefully this helps. Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/dyEyRLG Hopefully this helps. Happy Tweening!

Honestly I couldn't tell you. There must be something in your HTML/CSS, but unfortunately we don't have the time resources to go through the HTML structure and styles and find what could be causing this in your setup, as you can see in this demo: https://codepen.io/GreenSock/pen/MWzeJow Take a look at it and see the differences and how everything works in order to find the problem in your setup. Happy Tweening!

Yeah, there is a bunch of huge SVG elements with filters and when you do that performance is out the window. I remember talking to the owner and project manager about going with WebGL but the designs were already made in SVG and paid so there was no turning back from that. At the end some things were made in order to improve performance a bit, but yeah is no bueno 😬. At the end we're paid to do what the client wants to do, even if the result is like this, not to convince clients about the best approach, so the moral of the story is: "The client is right even when is wrong" 🤷‍♂️ Great to hear that you were able to solve your issues 🥳 Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/xxNxdaz Hopefully this helps. Happy Tweening!